<template>
	<view v-if="props.list && props.list.length > 0" class="order-list">
		<view class="order" v-for="(item, index) in props.list" :key="index">
			<view class="order-header">
				<view class="flex-fill font-size-medium">{{ item.name }}</view>
				<view class="status">
					<view>{{ item.productTypeName }}</view>
					<image src="/static/images/common/black_arrow_right.png"></image>
				</view>
			</view>
			<scroll-view scroll-x>
				<view class="images">
					<image class="radius" :src="item.thumbnail"></image>
				</view>
			</scroll-view>
			<view class="flex justify-between align-start text-size-12">
				<view class="left">
					<view>销量：<text class="text-black text-size-26">{{ item.sales }}</text></view>
					<view>售价：<text class="text-black text-size-26">￥{{ item.price }}</text></view>
					<view v-if="item.weight>0">菜品重量：<text class="text-black text-size-26">{{ item.weight }}g</text></view>
					<view v-if="item.info">菜品描述：
						<text >{{ item.info.description }}</text>
					</view>
				</view>
				<view class="right">
					<view>库存：<text class="text-black text-size-26">{{ item.stock }}</text></view>
					<view>划线价：<text class="text-black text-size-26">￥{{ item.price }}</text></view>
				</view>

			</view>
			<view class="flex justify-end margin-top-sm">
				<button @click.stop="handleSelect(item,1)" class=" cu-btn bg-menu" plain hover-class="none">修改</button>
				<button @click.stop="handleSelect(item,2)" class=" cu-btn bg-menu margin-left-sm" plain
					hover-class="none">{{item.sellout?'恢复':'售罄'}}</button>
				<button @click.stop="handleSelect(item,3)" class=" cu-btn bg-menu margin-left-sm" plain
					hover-class="none">{{item.shelves?'下架':'上架'}}</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { useSettingStore } from '@/stores/index';
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		isCard: {
			type: [Boolean, String],
			default: false
		},
		list: {
			default: () => {
				return [
					{
						"id": "19279425026000175",
						"shopId": "17379006305000199",
						"shopName": "清源食堂",
						"name": "菠萝",
						"keyword": "测试",
						"productTypeId": "19280037787000111",
						"productTypeName": "早餐",
						"price": 3,
						"cost": 0,
						"processCost": 0,
						"weight": 0,
						"originalPrice": 3,
						"thumbnail": "https://www.shuimuqingyuan.cn/img/2023-11-15/fe25164e9a1c4021b47b8f907eb87b61.jpeg",
						"barCode": "12343535",
						"integral": 0,
						"sort": 0,
						"stock": 3,
						"sales": 3,
						"specType": 1,
						"shelves": true,
						"hot": true,
						"fresh": true,
						"recommend": true,
						"collection": false,
						"sellout": false,
						"createTime": "2023-11-11 16:24:47",
						"recycleBin": false,
						"info": {
							"id": "19052833073000184",
							"productId": "19052833070000150",
							"browse": 0,
							"description": "测试",
							"codePath": null,
							"sliderImages": ["https://www.shuimuqingyuan.cn/img/2023-11-15/f50045cac33f4ce78f7038cb9a21ec23.jpeg"],
							"content": "<p>测试</p>"
						},
						"attrs": [],
						"attrValues": [{
							"id": "19644573477000192",
							"productId": "19279425026000175",
							"productRuleIndex": "1",
							"sales": 3,
							"stock": 3,
							"price": 3,
							"thumbnail": "https://www.shuimuqingyuan.cn/img/2023-11-15/fe25164e9a1c4021b47b8f907eb87b61.jpeg",
							"cost": 0,
							"barCode": "12343535",
							"weight": 0,
							"volume": 0,
							"attrValue": "1",
							"sort": 0
						}]

					}
				];
			}
		}
	});
	const handleSelect = (e : any, type : any) => {
		emit('action', e, type);
	};
</script>

<style lang="scss" scoped>
	.order-list {
		display: flex;
		width: 100%;
		flex-direction: column;

		.order {
			background-color: $bg-color-white;
			padding: 30rpx 40rpx;
			margin-bottom: 18rpx;

			.order-header {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.status {
					font-size: $font-size-base;
					color: $text-color-grey;
					display: flex;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-left: $spacing-row-sm;
					}
				}
			}

			.images {
				display: flex;
				padding: 30rpx 0;

				image {
					flex-shrink: 0;
					width: 150rpx;
					height: 112.5rpx;
				}
			}

			.info {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.left {
					font-size: $font-size-base;
					color: $text-color-grey;
				}

				.right {
					font-size: $font-size-base;
					color: $text-color-grey;
				}
			}

			.action {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				button {
					margin-left: 30rpx;
					font-size: $font-size-sm;
				}
			}
		}
	}
</style>